<template>
	<div class="index-view-rd">
		<div class="header">
			<div class="logo-wrap ofH">
				<img src="~__assets/images/icon/logo.png" class="fl logo" alt="">
				<div class="func">
					<router-link to="" class="h-func-item search"><i class="icon"></i></router-link>
					<router-link to="" class="h-func-item message"><i class="icon"></i></router-link>
					<router-link to="" class="h-func-item kf"><i class="icon"></i></router-link>
				</div>
			</div>
			<div class="ptab">
				<tab :line-width="2" active-color="#02d560" custom-bar-width="20px" :scroll-threshold="6">
				  <tab-item selected @click.native="tabSel('new')">最新</tab-item>
				  <tab-item @click.native="tabSel('yg')">预告</tab-item>
				  <tab-item @click.native="tabSel('jd')">酒店</tab-item>
				  <tab-item @click.native="tabSel('ms')">民宿</tab-item>
				  <tab-item @click.native="tabSel('gy')">公寓</tab-item>
				  <tab-item @clic.native="tabSel('more')">更多</tab-item>
				</tab>
			</div>
		</div>
		
		<div class="plist">
			<scroller 
				ref="scrollerEvent" 
				lock-x use-pullup use-pulldown  
				height="-140" 
				@on-scroll="onScroll" 
				@on-pullup-loading="loadMore" 
				@on-pulldown-loading="refresh" 
				v-model="status"
				:pulldown-config="{content:' ',downContent: ' ', upContent: ' ',loadingContent:' ',height:'40'}" 
				:pullup-config="{content:' ',upContent:' ', downContent: ' ',loadingContent:' '}"
			>
				<div class="wrapper">
					<ul class="content project-wrap">
						<li class="project-item">
							<router-link :to="{path:'/product/1'}">
								<div class="d-project-header clearfix">
									<div class="initiator">
										<img class="initiator-avatar" src="https://duo-online-resource.oss-cn-beijing.aliyuncs.com/1120791/8/1/1/80_80.jpg?x-oss-process=image/quality,q_90" alt="">
										<span class="initiator-name">XXX</span>
									</div>
									<div class="pj-status appointment">
										<i class="icon icon-appointment"></i>
										<span class="text-appointment">预约中</span>
									</div>
								</div>
								<div class="d-project-content">
									<div class="project-img">
										<img src="https://duo-online-resource.oss-cn-beijing.aliyuncs.com/11210182/8/2/1/690_400.jpg?x-oss-process=image/quality,q_90" alt="">
										<div class="img-intro slh">
											在瓯海区的三垟街道，是温州市区一块大型湿地是温州市区一块大型湿地··· 
										</div>
									</div>
									<div class="project-data">
										<div class="d-project-content-title">
											马尔代夫马让都希尔顿逸林度假酒店
										</div>
										<div class="d-project-content-type">
											<span class="sort-item">
												<i class="icon icon-build"></i>酒店
											</span>
											<span class="sort-item">
												<i class="icon icon-address"></i>马尔代夫-Gaafu Alifu环礁
											</span>
										</div>
										<div class="progress">
											<div class="box-row">
												<div class="time flex-1">剩余时间: 2小时</div>
												<div class="percent flex-1 left-1px">预约进度:346%</div>
											</div>
											<div class="weui-progress">
												<div class="weui-progress__bar">
													<div class="weui-progress__inner-bar" style="width: 70%"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</router-link>
						</li>
						<li class="project-item">
							<div class="d-project-header clearfix">
								<div class="initiator">
									<img class="initiator-avatar" src="https://duo-online-resource.oss-cn-beijing.aliyuncs.com/1120791/8/1/1/80_80.jpg?x-oss-process=image/quality,q_90" alt="">
									<span class="initiator-name">XXX</span>
								</div>
								<div class="pj-status appointment">
									<i class="icon icon-appointment"></i>
									<span class="text-appointment">预约中</span>
								</div>
							</div>
							<div class="d-project-content">
								<div class="project-img">
									<img src="https://duo-online-resource.oss-cn-beijing.aliyuncs.com/11210182/8/2/1/690_400.jpg?x-oss-process=image/quality,q_90" alt="">
									<div class="img-intro slh">
										在瓯海区的三垟街道，是温州市区一块大型湿地是温州市区一块大型湿地··· 
									</div>
								</div>
								<div class="project-data">
									<div class="d-project-content-title">
										马尔代夫马让都希尔顿逸林度假酒店
									</div>
									<div class="d-project-content-type">
										<span class="sort-item">
											<i class="icon icon-build"></i>酒店
										</span>
										<span class="sort-item">
											<i class="icon icon-address"></i>马尔代夫-Gaafu Alifu环礁
										</span>
									</div>
									<div class="progress">
										<div class="box-row">
											<div class="time flex-1">剩余时间: 2小时</div>
											<div class="percent flex-1 left-1px">预约进度:346%</div>
										</div>
										<div class="weui-progress">
											<div class="weui-progress__bar">
												<div class="weui-progress__inner-bar" style="width: 70%"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div slot="pulldown" class="xs-plugin-pulldown-container xs-plugin-pulldown-down" style="position: absolute; width: 100%; height: 40px; line-height: 40px; top: -40px; text-align: center;">
			        <span v-show="status.pulldownStatus === 'default'"></span>
			        <span class="pulldown-arrow" v-show="status.pulldownStatus === 'down' || status.pulldownStatus === 'up'" :class="{'rotate': status.pulldownStatus === 'up'}">↓</span>
			        <span v-show="status.pulldownStatus === 'loading'"><spinner type="ios-small"></spinner></span>
			    </div>
				<div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
			        <span v-show="status.pullupStatus === 'default'"></span>
			        <span class="pullup-arrow" v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">↑</span>
			        <span v-show="status.pullupStatus === 'loading'">
			        	<spinner type="ios-small"></spinner>
			        </span>
	      		</div>
			</scroller>

		</div>
	</div>
</template>

<style lang="scss">
	.app-content{padding-bottom: 0;}
	.project-item{
		background-color: #ffffff;
		padding: 0 a(30px);
		margin-top: a(20px);
		&:first-child{
			margin-top: 5px;
		}
		.initiator{
			float: left;
			@include lh(a(112px));
			.initiator-avatar{
				display: inline-block;
				width: a(50px);
				height: a(50px);
				border-radius: 50%;
			}
			.initiator-name{
				font-size: 12px;
				display: inline-block;
				margin-left: a(20px);
			}
		}
		.pj-status{
			float: right;
			@include lh(a(112px));

			&.appointment{
				.text-appointment{
					font-size: $f24;
					color: #02D560;
					display: inline-block;
				}
				.icon-appointment{
					display: inline-block;
					vertical-align: a(-4px);
					@include bg("~__assets/images/icon/iconfont-appiontment.png",a(26px),a(27px));
				}
			}
			&.subscription{
				color: #0f2dcd;
			}
		}
		.d-project-content{
			width: a(690px);
			margin: 0 auto;
			.project-img{
				position: relative;
				width: 100%;
				height: a(400px);
				img{
					width: 100%;
					height: 100%;
				}
				.img-intro{
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: a(90px);
					background-image: linear-gradient(-180deg,rgba(0,0,0,0) 0,rgba(102,102,102,.7) 100%);
					font-size: 14px;
					color:#ffffff;
					padding: a(30px) a(20px) 0;
				}
			}
		}
		.d-project-content-title{
			font-size: 18px;
			padding: a(30px) a(20px);
		}
		@media screen and (max-width:413px) and (min-width:359px) {
		  .d-project-content .d-project-content-type .sort-item {
		    padding-right: 18% !important
		  }

		  .d-project-content .d-project-content-type .sort-item:last-child {
		    padding-right: 0 !important
		  }
		}

		@media screen and (min-width:413px) {
		  .d-project-content .d-project-content-type .sort-item {
		    padding-right: 20% !important
		  }

		  .d-project-content .d-project-content-type .sort-item:last-child {
		    padding-right: 0 !important
		  }
		}
		.sort-item{
			font-size: 12px;
			.icon{margin-right: 10px;vertical-align: -1px;}
		}
		.d-project-content-type{
			padding: 0 a(20px) a(26px);
			color: #666;
		}
		.icon-build{
			@include bg("~__assets/images/icon/iconfont-build-1.png",10px,14px);
		}
		.icon-address{
			@include bg("~__assets/images/icon/iconfont-address-1.png",8px,14px);
		}
		.progress{
			padding-bottom: a(30px);
			.time{
				text-align: left;
				padding-left: a(20px);
				font-size: 10px;
				color: rgb(89, 89, 89);
			}
			.percent{
				text-align: right;
				padding-right: a(20px);
				font-size: 10px;
				color: rgb(2, 213, 96);
			}
			.weui-progress{
				margin-top: a(20px);
				display: -webkit-box;
			    display: -webkit-flex;
			    display: flex;
			    -webkit-box-align: center;
			    -webkit-align-items: center;
			    align-items: center;

			    .weui-progress__bar {
				    border-radius: a(3px);
				    height: 3px!important;
				    background-color: #ebebeb;
				    -webkit-box-flex: 1;
				    -webkit-flex: 1;
				    flex: 1;
				}
				.weui-progress__inner-bar {
				    border-radius: a(3px);
				    width: 0;
				    height: 100%;
					background: linear-gradient(left top,#00FF00,#02D560);
				    background: -webkit-linear-gradient(left top,#00FF00,#02D560);
				    background: -moz-linear-gradient(left top,#00FF00,#02D560);
				}
			}
		}
	}
	.header{
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		background-color: #ffffff;
		z-index: 997;
		padding-top: 20px;
		@include boxShadow();
		.logo-wrap{
			padding: 0 0 10px a(42px);
		}
		.logo{
			width: 109px;
			height: 15px;
		}
		.func{
			float: right;
			.h-func-item{
				display: inline-block;
				margin-right: a(30px);
			}
			.search i{@include bg("~__assets/images/icon/iconfont-search.png",17px,17px);}
			.message i{@include bg("~__assets/images/icon/iconfont-message.png",17px,16px);}
			.kf i{@include bg("~__assets/images/icon/iconfont-kf-1.png",20px,16px);}
		}
	}
	
	.plist{
		padding-top: 96px;
	}
	.rotate {
	  display: inline-block;
	  transform: rotate(-180deg);
	}
	.pullup-arrow {
	  transition: all linear 0.2s;
	  color: #666;
	  font-size: 25px;
	}
</style>

<script>
	import {Scroller,Spinner,LoadMore} from 'vux';
	export default{
		name:"index-view",
		components:{ Scroller,Spinner,LoadMore },
		data(){return{
	      	gbSuccess:false,
			menus: {
		        'goindex':'首页'
	      	},
	      	showMenus: false,
			groupInfo:{
				hadUser:[
					{
						"member_id":"1",
						"member_name":"啊哈哈",
						"member_avator":"http://uc.discuz.net/avatar.php?uid=492409&size=small",
						"role":"master"
					},
					{
						"member_id":"1",
						"member_name":"啊哈哈",
						"member_avator":"http://uc.discuz.net/avatar.php?uid=2893955&size=small",
						"role":"guest"
					}
				],
				needUserNum:4,
				deadLine:1512601128
			},
			scrollTop:'',
			n: 10,
			n1: 10,
			pullupEnabled: true,
			status: {
				pullupStatus: 'default',
				pulldownStatus: 'default'
			},
		}},
		created(){
			this.$nextTick(() => {
		        
		    })
		},
		methods:{
			tabSel(param){
				
			},
			onScroll (pos) {
		      this.scrollTop = pos.top
		      //console.log(pos.top)
		    },
		    loadMore () {
		      setTimeout(() => {
		        this.n += 10
		        setTimeout(() => {
		          this.$refs.scrollerEvent.donePullup()
		        }, 10)
		      }, 2000)
		    },
		    refresh () {
		      setTimeout(() => {
		        this.n = 10
		        this.$nextTick(() => {
		          setTimeout(() => {
		            this.$refs.scrollerEvent.donePulldown()
		            // this.pullupEnabled && this.$refs.scrollerEvent.enablePullup()
		          }, 10)
		        })
		      }, 2000)
		    },
		}
	};

</script>